<template>
  <!--HomeView为除登录页之外其他所有页面的父级页面，包含了共有的左侧菜单栏和顶部条-->
  <div style="display: flex;"><!--弹性布局，表示让父容器中所有的子元素横置，且父元素不会失高-->
    <div :style="{width: (isCollapse ? '64px' : '208px')}">
      <!--左侧菜单栏-->
      <!--
        router属性表示该菜单的index启用路由转换，可通过点击直接跳转到对应的组件
        collapse-transition属性表示该菜单的折叠动画是否开启，默认为true
      -->
      <el-menu style="width: 100%;height: 100vh;"
               background-color="#3c82f5"
               text-color="#fff"
               active-text-color="#ff0"
               :collapse="isCollapse"
               unique-opened
               router
               collapse-transition:false>
        <!--左侧菜单栏顶部条-->
        <el-row style="padding-top: 10px;">
          <el-col :span="2"></el-col>
          <el-col :span="7" style="padding-left: 7px;">
            <!--el-avatar会自动裁剪边框生成圆形图标-->
            <el-avatar src="/imgs/admin/logo.png" style="width: 35px;height: 35px;"></el-avatar>
          </el-col>
          <el-col :span="isCollapse? 0 : 13">
            <span style="font-weight: bold;color: #fff; position: relative;top: 8px;left: 2px;">智慧车辆</span>
          </el-col>
        </el-row>
        <!--菜单项及其子项-->
        <el-sub-menu index="1">
          <template #title>
            <el-icon style="font-size: 21px">
              <User/>
            </el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="/user">用户列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon style="font-size: 21px">
              <Van/>
            </el-icon>
            <span>车辆管理</span>
          </template>
          <el-menu-item index="/vehicle">车辆列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon style="font-size: 21px">
              <Location/>
            </el-icon>
            <span>围栏管理</span>
          </template>
          <el-menu-item index="/geofence">电子围栏</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon style="font-size: 21px">
              <Place/>
            </el-icon>
            <span>调度管理</span>
          </template>
          <el-menu-item index="/application">申请列表</el-menu-item>
          <el-menu-item index="/audit">调度审核</el-menu-item>
          <el-menu-item index="/distribute">用车分配</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="5">
          <template #title>
            <el-icon style="font-size: 21px">
              <MessageBox/>
            </el-icon>
            <span>字典管理</span>
          </template>
          <el-menu-item index="/dict">字典列表</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div :style="{width: (isCollapse ? 'calc(100% - 64px)' : 'calc(100% - 208px)')}">
      <!--右侧顶部条-->
      <el-header style="background-color: #fff;height: 10vh;padding-top: 22px;">
        <el-row :gutter="10">
          <el-col :span="18">
            <el-icon style="font-size:20px;" @click="handleCollapse">
              <Expand/>
            </el-icon>
          </el-col>
          <el-col :span="6" style="position: relative;">
            <el-dropdown trigger="click" style="position: absolute;right: 20px;">
              <span style="font-size: 19px;font-weight: bold;cursor:pointer;">
                {{ username }}
                <el-icon>
                  <arrow-down/>
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
        <!--面包屑导航：首页 / xx模块 / xx功能-->
        <el-breadcrumb separator="/" style="position: relative;top: 20px;">
          <el-breadcrumb-item>首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in breadcrumb">{{ item }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <!--右侧可变区域-->
      <el-main style="height: 90vh;padding: 0;overflow-y: auto;">
        <router-view/>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
// import {ElMessage} from "element-plus";
import {useRoute, useRouter} from "vue-router";

// 定义变量，用于控制菜单栏折叠与否
const isCollapse = ref(false);
const handleCollapse = () => {
  isCollapse.value = !isCollapse.value;
}

// 获取当前登录的用户信息
const username = ref('');
var user = window.getUser();
username.value = user.username;
// 手动验证是否登录，路由守卫见main.js
// if (user !== null) {
//   username.value = user.username;
// } else {
//   ElMessage.warning({showClose: true, message: "未登录，请先登录！"})
//   window.location.href = "/login";
// }

// 退出登录
const logout = () => {
  if (confirm("您确定要退出登录吗？")) {
    localStorage.removeItem('user');
    window.location.href = "/login";
  }
}

// 定义数组，用于保存当前用于展示面包屑导航的值
const breadcrumb = ref([]);
// 定义对象，用于维护路由path与面包屑导航的值的对应关系
let map = {
  '/user': ['用户管理', '用户列表'],
  '/vehicle': ['车辆管理', '车辆列表'],
  '/geofence': ['围栏管理', '电子围栏'],
  '/application': ['调度管理', '申请列表'],
  '/audit': ['调度管理', '调度审核'],
  '/distribute': ['调度管理', '用车分配'],
  '/dict': ['字典管理', '字典列表'],
  '/geofenceMap': ['围栏管理', '围栏绘制'],
  '/dictOption': ['字典管理', '字典项列表']
}
// 一进入页面立即获取当前路由path对应的面包屑导航值
onMounted(() => {
  updateBreadcrumb(route);
})

// useRoute是vue-router提供的一个方法，用于获取当前路由信息对象（访问当前路由状态）
const route = useRoute();
// 更新面包屑导航的方法
const updateBreadcrumb = (route) => {
  // 从当前路由对象中获取的到path
  const path = route.path;
  breadcrumb.value = map[path];
}
// 获取路由守卫，监听路由，只要path发生改变，就立即更新面包屑的值
const router = useRouter()
router.beforeEach((to, from, next) => {
  updateBreadcrumb(to);
  next();
})
</script>
